<link rel="stylesheet" href="/assets/home/css/order.css">

 <!-- wowjs  -->
 <link rel="stylesheet" href="/assets/home/plugin/wowjs/animate.min.css"/>
 <script src="/assets/home/plugin/wowjs/wow.min.js"></script>
 
 <!-- 下拉刷新 -->
 <link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css"/>
 <script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
 
 <!-- 引入http请求插件 -->
 <script src="/assets/home/plugin/axios/axios.min.js"></script>
 <script src="/assets/home/plugin/axios/request.js"></script>
 
    <div id="list">
        <div class="list"></div>
    </div>

    <script>
        new WOW({
            boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
            animateClass: 'animated', // animation.css 动画的 class(默认是animated)
            offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
            mobile: true,       // 是否在移动设备上执行动画(默认为true)
            live: true,       // 异步加载的内容是否有效(默认为true)
            callback: function (box) {
                // 每次动画启动时都会触发这个回调函数
                //传入的参数是动画DOM节点
                // console.log(box)
            },
            scrollContainer: "#list" // 可选滚动容器选择器，否则使用窗口
        }).init();
    
        var keywords = '';
        var page = 0; //当前页
        var limit = 10; //每页显示最大信息条数

        //修改浏览器自带的后退按钮
    window.history.pushState(null, null, `#`);

    window.addEventListener('popstate', function(e){
        e.preventDefault()
        location.href = `{:url('home/business/index')}`
    }, false)
    
        $("input[name=search]").change(function(){
            keywords = $(this).val()
            DownCallback()
        })
    
        //配置下拉刷新和上拉加载
        var scroll = new MeScroll('list',{
            down: {
                auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
                callback: DownCallback //下拉刷新的回调
            },
            up: {
                page: {
                    num: page, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    size: limit //每页数据条数,默认10
                },
                auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
                isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                toTop:{ //配置回到顶部按钮
                    duration: 300,
                            // public\assets\home\plugin\mescroll\mescroll-totop.png
                    src : "/assets/home/plugin/mescroll/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                    offset : 100,
                    supportTap : true, //快速响应
                }
               
            }
        })
    
        // 下拉刷新回调
        function DownCallback()
        {
            scroll.resetUpScroll() 
            $('#list .list').empty()                    
        }
    
        // 上拉刷新回调
        async function UpCallback(current)
        {
            //当前页码值
            page = current.num
            limit = current.size
    
            //组装数据
            var data = {
                page:page,
                limit:limit,
                keywords:keywords
            };
    
            var result = await POST({
                url:'/business/subject',
                params: data
            })
    
            if(!result) return false
    
            if(result.code == 0)
            {
                mui.toast(result.msg, {duration: 1000})
                // 暂无更多数据
                scroll.endBySize(0, 0)
                return false
            }
    
            var list = result.data.list
            var count = result.data.count
    
            //设置上拉加载状态
            scroll.endBySize(list.length, count)
            FetchList(list)
        }
    
        // 追加渲染数据
        function FetchList(list)
        {   

            for(var item of list) 
            {
                var temp = `
                <div class="item wow bounceIn" data-wow-delay="0.1s">
                    <div class="content">
                        <div class="thumb">
                            <img src="${item.subject.thumbs_text}" alt="">
                        </div>
                        <div class="info">
                            <div class="code">
                                <span>订单号：</span>${item.code}
                            </div>
                            <div class="name">
                                <span>课程名称：</span>${item.subject.title}
                            </div>
                            <div class="type">
                                <span>课程分类：</span>${item.cate}
                            </div>
                            <div class="price">
                                <span>实付价格：</span>${item.total}
                            </div>
                            <div class="time">
                                <span>购买时间：</span>${item.createtime_text}
                            </div>
                        </div>
                    </div>

                    <div class="footer">
                        <div class="btn-list">
                            <a href="{:url('home/business/comment')}?orderid=${item.id}}" 
                            class="mui-btn mui-btn-primary">
                                ${item.comment.id ? "查看评论" : "立即评论"}  </a>
                            <a href="{:url('home/subject/info')}?subid=${item.subid}" class="btn mui-btn mui-btn-success">查看课程详情</a>
                        </div>
                    </div>
            </div>
                `
                $('#list .list').append(temp)
            }
        }
    
    </script>